<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位问题</title>
		<style>
			/* 相对定位:相对于父级元素进行定位，没有父级按照body进行定位，不脱离文档流
			   绝对定位：按照页面左侧顶角进行定位，在父级元素中，首先按照父级定位，脱离文档流
			 */
			.d{
				width:300px;
				height:300px;
				background: #f00;
				border-radius: 50%;
				position: relative;
				position:absolute;
				top:0;
				left:0;
				
			}
			/* 需求：5个圆，每个圆颜色都不同
			   类选择器使用问题： 常用模式：3个别名
			          html语法： class="别名1 别名2 别名3..."
					  css语法：  .别名1{}
			  */
			 .d1{
				 background: #0055ff;
			 }
			 .d2{
				 background: #f00;
			 }
			 .d3{
				 background:#00aa00 ;
				 .d4{
					 background: #00007f;
				 }
				 .d5{
					 background: #aaff00;
				 }
			 }
		</style>
	</head>
	<body>
		<!-- 创建4个div 1个p -->
		<div class="d d1"></div>
		<div class="d d2"></div>
		<div class="d d3"></div>
		<p class="d d4"> </p>
		<div class="d d5"></div>
	</body>
</html>